<template>
    <div id="container" class="max-w-[1440px] mx-auto bg-primary-300 text-white min-h-screen pt-12"> 
        <div id="main" class="bg-primary-300 p-6 text-black">
            <div class="rounded bg-white mx-4 my-4 py-6 ">
                <div class="px-6">
                    <h1 class="text-lg font-semibold">个人中心</h1>
                </div>
            </div>
            <div class="rounded bg-white mx-4 mt-4 py-6 "> 
                <PersonalNav/>
                <div class="px-6 mt-4">
                    <div v-if="loading" class="flex justify-center items-center h-40">
                        <LoadingSpinner />
                    </div>
                    <div v-else class="space-y-4">
                        <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
                            <div class="text-gray-600">用户名：</div>
                            <div class="font-medium">{{ userInfo.username || '未设置' }}</div>
                        </div>
                        <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
                            <div class="text-gray-600">邮箱：</div>
                            <div class="font-medium">{{ userInfo.email || '未设置' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserInfo } from '@/api/account'
import { showToast } from '@/utils/toast'
import PersonalNav from '@/components/movie/PersonalNav.vue'

// 用户信息
const userInfo = ref({})

// 获取用户信息
async function fetchUserInfo() {
    try {
        const response = await getUserInfo()
        userInfo.value = response.data
        console.log(userInfo.value)
    } catch (error) {
        console.error('获取用户信息失败:', error)
        let errorMessage = '获取用户信息失败'
        
        if (error.response && error.response.data) {
            const errorData = error.response.data
            if (errorData.detail) {
                errorMessage = errorData.detail
            }
        }
        
        showToast(errorMessage, 'error')
    }
}

// 在组件挂载时获取用户信息
onMounted(() => {
    fetchUserInfo()
})
</script>